<template>
	<div id="user">
		<div id="title">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<router-link to="/home"><img src="~@/img/logo_mtime.png" /></router-link>
		</div>
		<div id="list">
			<li><i class="iconfont icon-wode"></i><input type="text" name="username" id="username" value="" placeholder="请输入用户名"/></li>
			<p id="msg"></p>
			<li><i class="iconfont icon-mima"></i><input type="password" name="password" id="password" value="" placeholder="请输入密码"/></li>
			<p id="msg1"></p>
			<input type="button" name="btn" id="btn" value="登陆" />
			<router-link to="/register" class="register" style="margin-left:20px;">免费注册</router-link>	
			<p class="baseline"></p>
			<fieldset id="" style="border-top:1px solid #eee;">
				<legend style="text-align: center;">使用第三方登录</legend>	
			</fieldset>
			<div id="iconfont">
				<p class="iconfont icon-weibo"></p>
				<p class="iconfont icon-QQ"></p>
			</div>
		</div>
	</div>
</template>

<script>
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	import $			from "jquery"
	export default {
		data() {
			return {

			}
		},
		mounted() {
			footerToggle.hide();
			headerToggle.hide();
			
			//登陆验证
			$(function() {

						var oReg = /^1\d{10}$/;
						$('#username').blur(function() {
							if(oReg.test($('#username').val())) {
								$('#msg').html('手机号正确');
							} else {
								$('#msg').html('请输入正确的手机号');
							}
						})
						var oReg1 = /^[a-zA-Z0-9]{4,16}$/;
						$('#password').blur(function() {
									if(oReg1.test($('#password').val())) {
										$('#msg1').html('密码正确');
				}else{
					$('#msg1').html('请输入正确的密码');
				}
			})
				
				
				$("#btn").click(function(){
				var user = $("#username").val();
				var pass = $("#password").val();
				$.ajax({
					type:'get',
					url:"http://localhost:3000/login",
					data:{
						username:user,
						password:pass
					},
					success: function (data){
						console.log(data);
						if(data == "1"){//1表示登陆成功
//							alert(1)
							window.location.href = "http://10.8.154.144:8080/home";
						}else if(data == "0"){//0表示信息错误
							alert('请输入用户名/密码')
						}
					}
				});
				})
			})
			
			
			
		},
		methods: {
			test() {
				window.history.go(-1);
			}
		},
		components: {

		}
	}
</script>

<style scoped lang="scss">
	@import "~@/scss/main.scss";
	#user {
		
		#title {
			width: 375px;
			height: 53px;
			background: #1C2635;
			.iconfont {
				color: #B5B8BD;
				float: left;
				font-size: 24px;
				margin: 12px 0 0 12px;
			}
			a {
				float: left;
				@include rect(0.73rem, 0.22rem);
				img {
					float: left;
					@include rect(0.73rem, 0.22rem);
					margin: 20px 120px 10px;
				}
			}
		}
		
	#list{
			list-style: none;
			@include rect(100%,1.17rem);
			li{
				@include rect(100%,0.58rem);
				border-bottom: solid 1px #eee;
				i{
					float:left;
					@include rect(0.23rem,0.29rem);
					line-height:58px;
					margin: 0 10px;
					font-size:26px;
				}
				input{
					float:left;
					@include rect(3.13rem,0.45rem);
					border:0;
					line-height:58px;
					margin:5px;
					font-size:16px;
				}
				
			}
			#btn{
					width:339px;
					height:51px;
					background:#1e7dd7;
					border: 1px solid #1e7dd7;
					color:#fff;
					font-size:20px;
					border-radius: 30px;
					margin:20px 17px 20px;
				}
		}
		#iconfont{
			@include rect(100%, auto);
			p{
				width:auto;
				font-size:60px;
				margin:10px;
				box-sizing: border-box;
				float:left;
				&:nth-child(1){
					margin-left: 110px;
				}
			}
		}
		#msg,#msg1{
			width:100%;
			height:20px;
		}
	}
</style>